<template>
  <div class="systemSetup">
    <a-form
      :form="form"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
      @submit="handleSubmit"
    >
      <a-form-item>
        <p>系统地址</p>
        <a-input v-decorator="['systemUrl']" />
      </a-form-item>
      <a-form-item>
        <p>后台地址</p>
        <a-input v-decorator="['adminSystemUrl']" />
      </a-form-item>
      <a-form-item>
        <p>系统标题</p>
        <a-input v-decorator="['systemTitle']" />
      </a-form-item>
      <a-form-item>
        <p>Logo</p>
        <a-input v-decorator="['systemLogo']" />
      </a-form-item>
      <a-form-item>
        <p>Favicon</p>
        <a-input v-decorator="['systemFavicon']" />
      </a-form-item>
      <a-form-item>
        <p>页脚信息</p>
        <a-input v-decorator="['systemFooterInfo']" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit"> 保存 </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  created() {
    this.GetSetting();
    this.$nextTick(() => {
      const { setFieldsValue } = this.form;
      setFieldsValue(this.settingList);
      console.log(this.settingList);
    });
  },
  computed: {
    ...mapState({
      settingList: (state) => state.setting.settingList,
    }),
  },
  watch: {
    settingList() {
      const { setFieldsValue } = this.form;
      setFieldsValue(this.settingList);
    },
  },
  methods: {
    ...mapActions({
      PostSetting: "setting/PostSetting",
      GetSetting: "setting/GetSetting",
    }),
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        console.log("Received values of form: ", values);
        this.PostSetting(values);
      });
      this.GetSetting();
      const { setFieldsValue } = this.form;
      setFieldsValue(this.settingList);
    },
  },
};
</script>

<style scoped lang="scss">
.ant-form-item-children {
  p {
    height: 30px;
  }
  input#coordinated_systemUrl {
    width: 80%;
  }
}
</style>
